<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>
  <table border="1" width="400">
    <tr>
      <td>DATA</td>
      <td>DATA</td>
      <td>DATA</td>
      <td>DATA</td>
    </tr>
    <tr>
      <td>DATA</td>
      <td>DATA</td>
      <td>DATA</td>
      <td>DATA</td>
    </tr>
    <tr>
      <td>DATA</td>
      <td>DATA</td>
      <td>DATA</td>
      <td>DATA</td>
    </tr>
  </table>
</body>
<script>
  var tds = document.querySelectorAll("table td");

  for(var i=0;i<tds.length;i++){
    // 给所有的td添加点击事件
    tds[i].onclick = function(){
      // 创建输入框
      var ipt = document.createElement("input");
      // 设置输入框内容为td的内容
      ipt.value = this.innerHTML;
      // 清空td内容
      this.innerHTML = "";
      // 设置输入框获取焦点
      // ipt.autofocus = true;
      // 将输入框插入到td
      this.appendChild(ipt);
      // 设置输入框获取焦点
      ipt.focus();
      // 阻止输入框点击事件的事件冒泡，防止td的事件被重复触发
      ipt.onclick = function(eve){
        var e = eve || window.event;
        if(e.stopPropagation){
          e.stopPropagation()
        }else{
          e.cancelBubble = true;
        }
      }
      // 提前将表示td的this保存成变量，以便将来this被修改时能够找到当前td
      var td = this;
      // 输入框失去焦点时
      ipt.onblur = function(){
        // 将输入框内容设置到td
        td.innerHTML = this.value;
      }
    }
  }

</script>
</html>